<template>
  <div class="history">
    <section class="header">
      <span @click="goBack()">
        <i class="iconfont iconfanhui1"></i>五险一金/历史明细表
      </span>
    </section>
    <ul class="menu-swtich">
      <span>年份</span>
      <li
        v-for="(item, index) in menu"
        :key="index"
        :class="[switchIndex==index?'active':'']"
        @click="switchFun(index)"
      >{{item.title}}</li>
    </ul>
    <div class="sm-f clearfix" @click="jumpPage()">
      <div class="month">12月</div>
      <ul>
        <li class="value">4</li>
        <li>社保缴纳人数</li>
      </ul>
      <ul>
        <li class="value">12334</li>
        <li>社保公司/元</li>
      </ul>
      <ul>
        <li class="value">234</li>
        <li>公积金缴纳人数</li>
      </ul>
      <ul>
        <li class="value">239</li>
        <li>公积金公司/元</li>
      </ul>
      <i class="iconfont iconright1"></i>
    </div>
    <div class="sm-f clearfix" @click="jumpPage()">
      <div class="month">1月</div>
      <ul>
        <li class="value">4</li>
        <li>社保缴纳人数</li>
      </ul>
      <ul>
        <li class="value">12334</li>
        <li>社保公司/元</li>
      </ul>
      <ul>
        <li class="value">234</li>
        <li>公积金缴纳人数</li>
      </ul>
      <ul>
        <li class="value">239</li>
        <li>公积金公司/元</li>
      </ul>
      <i class="iconfont iconright1"></i>
    </div>
  </div>
</template>

<script>
import { requestApiPost } from "../api/api";
import { reqRep } from "../report/reqReport";
import { resRep } from "../report/resReport";
export default {
  name: "history",
  data() {
    return {
      isNumber: 0,
      switchIndex: 0,
      searchContent: "",
      menu: [
        { title: "2016" },
        { title: "2017" },
        { title: "2018" },
        { title: "2019" }
      ]
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    jumpPage() {
      this.$router.push("fiveFundDetail");
    },
    switchFun(i) {
      this.switchIndex = i;
    }
  },
  created() {}
};
</script>
<style scoped>
.header {
  padding: 15px;
  height: 50px;
  box-sizing: border-box;
  font-size: 14px;
  border-bottom: 1px solid #eee;
}
.header span {
  cursor: pointer;
}
.header i {
  margin-right: 5px;
}
.menu-swtich {
  padding: 0 34px;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #eee;
}
.menu-swtich span {
  color: #999;
}
.menu-swtich li {
  display: inline-block;
  padding: 0 15px;
  cursor: pointer;
}
.active {
  color: #13cb6e;
  border-bottom: 2px solid #13cb6e;
}
.sm-f {
  padding: 15px 34px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}
.sm-f > ul {
  display: inline-block;
  width: 100px;
  margin-right: 15px;
  color: #999;
}
.sm-f .value {
  color: #666;
  font-size: 14px;
  margin-bottom: 5px;
}
.sm-f .month {
  float: left;
  height: 45px;
  width: 40px;
  line-height: 45px;
  text-align: center;
  margin-right: 80px;
}
.sm-f .iconright1 {
  float: right;
  font-size: 16px;
  color: #999;
  height: 45px;
  line-height: 45px;
}
</style>
